<template>
    <div id="quku_album">
        <div class="container">
            <div class="handle-box">
                <el-checkbox v-if="btnPermit" v-model="query.checked" @change="handleStatusChange" style="margin-bottom: 18px">
                    <!-- 待审核 -->
                    {{ $t('m.daiShenHeTick') }}
                </el-checkbox>
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="">
                        <el-input
                            placeholder="ID"
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.id"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            v-model="query.importName"
                            placeholder="专辑名"
                            class="handle-input mr10"
                            clearable
                            @clear="handleSearch"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.namePinyinFull"
                            placeholder="拼音名"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.actorImportName"
                            placeholder="歌手名"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.icpn"
                            placeholder="ICPN"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-select
                            v-model="query.status"
                            placeholder="状态"
                            :clearable="true"
                            class="handle-select mr10"
                            @change="handleSearch"
                        >
                            <el-option key="1" label="有效" value="1"></el-option>
                            <el-option key="0" label="无效" value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button :disabled="disabled" type="primary" @click="handleSearch">
                            <!-- 查询 -->
                            {{ $t('m.queryBtn') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column width="auto" label="专辑ID" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="externalId" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.externalId }}</template>
                </el-table-column>

                <el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.importName }}</template>
                </el-table-column>

                <el-table-column width="auto" label="拼音名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.namePinyinFull }}</template>
                </el-table-column>

                <el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.actorImportName }}</template>
                </el-table-column>

                <!-- <el-table-column width="auto" label="评级" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.songTitle }}</template>
                </el-table-column> -->

                <el-table-column width="auto" label="ICPN" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.icpn }}</template>
                </el-table-column>

                <el-table-column width="auto" label="发行日期" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>

                <el-table-column width="auto" label="状态" align="center">
                    <template slot-scope="scope">
                        <!-- <el-tag :type="scope.row.status === '成功' ? 'success' : scope.row.status === '失败' ? 'danger' : ''">
                            {{ scope.row.status }}
                        </el-tag> -->
                        <img
                            v-if="scope.row.status == 1"
                            style="width: 20px; height: 20px"
                            src="@/assets/images/歌曲管理/u464.png"
                            alt=""
                        />
                        <img
                            v-else-if="scope.row.status == 2"
                            style="width: 20px; height: 20px"
                            src="@/assets/images/歌曲管理/u468.png"
                            alt=""
                        />
                        <img
                            v-else-if="scope.row.status == 3"
                            style="width: 20px; height: 20px"
                            src="@/assets/images/歌曲管理/u468.png"
                            alt=""
                        />
                        <img v-else style="width: 20px; height: 20px" src="@/assets/images/歌曲管理/u468.png" alt="" />
                    </template>
                </el-table-column>

                <el-table-column width="auto" label="操作者" align="center" :show-overflow-tooltip="true" v-if="query.show">
                    <template slot-scope="scope">{{ scope.row.modifiedBy }}</template>
                </el-table-column>

                <el-table-column width="auto" label="更新时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                </el-table-column>

                <el-table-column width="222px" label="管理" align="center">
                    <template slot-scope="scope">
                        <!-- <span
                            style="font-size:12px;display: inline-block; cursor: pointer; width: 30px; border-radius: 5px; background: #409eff; color: #fff; margin-right:10px;"
                            @click="handleEdit(scope.$index, scope.row)"
                        >
                            编辑</span
                        >
                        <span
                            style="font-size:12px;display: inline-block;  cursor: pointer; width: 40px; border-radius: 5px; background: #e6a23c; color: #fff;"
                            @click="handleTagging(scope.$index, scope.row)"
                            >打标签</span
                        > -->
                        <el-button
                            @click="handleEdit(scope.$index, scope.row, 0)"
                            v-if="!query.show"
                            type="primary"
                            size="mini"
                            :disabled="scope.row.editFlag == -1"
                        >
                            <!-- 查看 -->
                            {{ $t('m.seeBtn') }}
                        </el-button>

                        <el-button
                            @click="handleEdit(scope.$index, scope.row, 1)"
                            v-if="!query.show"
                            type="primary"
                            size="mini"
                            :disabled="scope.row.editFlag == -1"
                        >
                            <!-- 编辑 -->
                            {{ $t('m.editBtn') }}
                        </el-button>
                        <el-button
                            @click="handleTagging(scope.$index, scope.row)"
                            v-if="!query.show"
                            type="warning"
                            size="mini"
                            :disabled="scope.row.editFlag == -1"
                        >
                            <!-- 打标签 -->
                            {{ $t('m.hitLabelBtn') }}
                        </el-button>

                        <el-button @click="handleChecked(scope.$index, scope.row)" v-if="query.show" type="warning" size="mini"
                            >审核</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 打标签弹出框 -->
        <el-dialog
            title="打标签"
            :visible.sync="editVisible"
            width="30%"
            :close-on-click-modal="false"
            :show-close="true"
            @close="handleClose"
        >
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="专辑名">
                    <el-input v-model="form.albumName"></el-input>
                </el-form-item>

                <!-- <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item> -->
                <el-form-item label="标签：">
                    <div class="block">
                        <el-cascader
                            :show-all-levels="false"
                            v-model="form.tags"
                            class="w"
                            :options="tagList"
                            :props="{
                                emitPath: false,
                                multiple: true,
                                checkStrictly: true,
                                value: 'value',
                                label: 'label',
                                children: 'children'
                            }"
                        >
                            <template slot-scope="{ node, data }">
                                <span>{{ data.label }}</span>
                                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                            </template>
                        </el-cascader>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTagging">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import NProgress from 'nprogress';
  import { mapGetters, mapMutations, mapActions } from 'vuex';
  import { debounce, throttle } from '@/utils/utils.js';
  import axios from 'axios';
  export default {
      name: 'QukuAlbum',
      data() {
          return {
              btnPermit: JSON.parse(localStorage.getItem('roles')) ? JSON.parse(localStorage.getItem('roles')).includes('ADMIN') : false,
              disabled: false,
              albumId: '',
              // query: {
              //     show: false,
              //     checked: false,
              //     pageIndex: 1,
              //     pageSize: 10,
              //     id: '',
              //     importName: '',
              //     namePinyinFull: '',
              //     actorImportName: '',
              //     icpn: '',
              //     status: ''
              // },
              // tableData: [],
              // pageTotal: 0,

              operator: localStorage.getItem('ms_username') || '',
              editVisible: false,
              tagList: [],
              form: {
                  tags: [],
                  albumName: ''
              }
          };
      },
      // activated() {
      //     this.getData();
      // },
      destroyed() {
          if (!this.tagsList.some((item) => item.name === 'QukuAlbum')) {
              // 关闭标签
              this.SET_QUKUALBUM_DATA([]);
              this.SET_QUKUALBUM_PAGETOTAL(0);
              this.SET_QUKUALBUM_QUERY({
                  show: false,
                  checked: false,
                  pageIndex: 1,
                  pageSize: 10,
                  id: '',
                  importName: '',
                  namePinyinFull: '',
                  actorImportName: '',
                  icpn: '',
                  status: ''
              });
          } else {
              //  只是点击切换标签 没有关闭标签 什么都不做
          }
      },
      // created() {
      //     if (this.query.checked === true) {
      //         if (this.tableData.length === 0) {
      //             this.getCheckedData();
      //         } else {
      //             //  什么都不做
      //         }
      //     } else if (this.query.checked === false) {
      //         if (this.tableData.length === 0) {
      //             this.getData();
      //         } else {
      //             //  什么都不做
      //         }
      //     }
      // },
      watch: {
          $route: {
              deep: true,
              immediate: true,
              handler(a, b) {
                  console.log(a, b);
                  if (a.name === 'QukuAlbum' && this.query.checked === true) {
                      if (this.tableData.length === 0) {
                          this.getCheckedData();
                      } else {
                          //  什么都不做
                      }
                  } else if (a.name === 'QukuAlbum' && this.query.checked === false) {
                      if (this.tableData.length === 0) {
                          this.getData();
                      } else {
                          //  什么都不做
                      }
                  }
              }
          }
      },
      computed: {
          ...mapGetters({
              pageTotal: 'qukuAlbumPageTotal',
              tableData: 'qukuAlbumData',
              query: 'qukuAlbumQuery',
              tagsList: 'tagsList'
          })
      },
      methods: {
          handleChecked(index, row) {
              console.log(index, row);
              this.$router.replace({
                  path: '/album_3/checked',
                  query: {
                      id: row.id
                  }
              });
              localStorage.setItem('id_album', row.id);
          },
          handleStatusChange: debounce(function (value) {
              console.log(value);
              setTimeout(() => {
                  if (value == true) {
                      this.$set(this.query, 'pageIndex', 1);
                      this.getCheckedData();
                  } else {
                      this.$set(this.query, 'pageIndex', 1);
                      this.getData();
                  }
              }, 500);
          }, 1000),
          // handleStatusChange(value) {
          //     console.log(value);
          //     if (value == true) {
          //         this.$set(this.query, 'pageIndex', 1);
          //         this.getCheckedData();
          //     } else {
          //         this.$set(this.query, 'pageIndex', 1);
          //         this.getData();
          //     }
          // },

          async getCheckedData() {
              try {
                  let _this = this;
                  this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
                  NProgress.start();
                  let url = '/album/list';
                  let { data: res } = await this.$http[0].get(url, {
                      headers: {},
                      cancelToken: new axios.CancelToken(function executor(c) {
                          _this.source = c;
                      }),
                      params: this.$removeField({
                          page: this.query.pageIndex,
                          size: this.query.pageSize,
                          ids: this.query.id.trim(),
                          importName: this.query.importName.trim(),
                          namePinyinFull: this.query.namePinyinFull.trim(),
                          actorImportName: this.query.actorImportName.trim(),
                          icpn: this.query.icpn.trim(),
                          status: this.query.status,
                          auditFlag: -1
                      })
                  });
                  console.log('待审核', res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  // 中间处理
                  if (res.data.content && res.data.content.length > 0) {
                      res.data.content.map((item) => {
                          item.actorImportName = '';
                          if (item.tblActors && item.tblActors.length != 0) {
                              item.tblActors.map((val) => {
                                  item.actorImportName += val.name + '/';
                              });
                              item.actorImportName = item.actorImportName.slice(0, -1);
                          }
                          // if (item.actorImportName !== '') {
                          //     item.actorImportName = item.actorImportName.slice(0, -1);
                          // }

                          item.createTime = this.$dateFormat(item.createTime, '', '-');
                          item.updateTime = this.$dateFormat(item.updateTime, '', '-');
                      });
                      // 赋值
                      // this.tableData = res.data.content;
                      // this.pageTotal = res.data.totalElements || 0;

                      this.SET_QUKUALBUM_DATA(res.data.content);
                      this.SET_QUKUALBUM_PAGETOTAL(res.data.totalElements);
                      var tempQuery = { ...this.query };
                      this.$set(tempQuery, 'show', true);
                      this.SET_QUKUALBUM_QUERY(tempQuery);
                  } else {
                      // this.tableData = [];
                      // this.pageTotal = 0;

                      this.SET_QUKUALBUM_DATA([]);
                      this.SET_QUKUALBUM_PAGETOTAL(0);
                      var tempQuery = { ...this.query };
                      this.$set(tempQuery, 'show', true);
                      this.SET_QUKUALBUM_QUERY(tempQuery);
                  }
                  NProgress.done();
              } catch (err) {
                  NProgress.done();
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          ...mapMutations(['SET_QUKUALBUM_DATA', 'SET_QUKUALBUM_PAGETOTAL', 'SET_QUKUALBUM_QUERY', 'SET_QUKUALBUM_FORM']),
          // setValueNull() {
          //     this.getData();
          // },
          cancelQuest() {
              if (typeof this.source === 'function') {
                  this.source('终止请求'); //取消请求
              }
          },
          async getData() {
              try {
                  let _this = this;
                  this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
                  NProgress.start();
                  this.disabled = true;
                  let url = '/album/list';
                  let { data: res } = await this.$http[0].get(url, {
                      cancelToken: new axios.CancelToken(function executor(c) {
                          _this.source = c;
                      }),
                      params: this.$removeField({
                          page: this.query.pageIndex,
                          size: this.query.pageSize,
                          ids: this.query.id.trim(),
                          importName: this.query.importName.trim(),
                          namePinyinFull: this.query.namePinyinFull.trim(),
                          actorImportName: this.query.actorImportName.trim(),
                          icpn: this.query.icpn.trim(),
                          status: this.query.status
                      })
                  });
                  console.log('专辑管理', res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  // 中间处理
                  if (res.data.content && res.data.content.length > 0) {
                      res.data.content.map((item) => {
                          item.actorImportName = '';
                          if (item.tblActors && item.tblActors.length != 0) {
                              item.tblActors.map((val) => {
                                  item.actorImportName += val.name + '/';
                              });
                              item.actorImportName = item.actorImportName.slice(0, -1);
                          }
                          // if (item.actorImportName !== '') {
                          //     item.actorImportName = item.actorImportName.slice(0, -1);
                          // }

                          item.createTime = this.$dateFormat(item.createTime, '', '-');
                          item.updateTime = this.$dateFormat(item.updateTime, '', '-');
                      });
                      // 赋值
                      // this.tableData = res.data.content;
                      // this.pageTotal = res.data.totalElements || 0;

                      this.SET_QUKUALBUM_DATA(res.data.content);
                      this.SET_QUKUALBUM_PAGETOTAL(res.data.totalElements);
                      var tempQuery = { ...this.query };
                      this.$set(tempQuery, 'show', false);
                      this.SET_QUKUALBUM_QUERY(tempQuery);
                  } else {
                      // this.tableData = [];
                      // this.pageTotal = 0;

                      this.SET_QUKUALBUM_DATA([]);
                      this.SET_QUKUALBUM_PAGETOTAL(0);
                      var tempQuery = { ...this.query };
                      this.$set(tempQuery, 'show', false);
                      this.SET_QUKUALBUM_QUERY(tempQuery);
                  }
                  NProgress.done();
                  this.disabled = false;
              } catch (err) {
                  console.dir(err);
                  NProgress.done();
                  this.disabled = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          // 触发查询按钮
          // handleSearch() {
          //     this.$set(this.query, 'pageIndex', 1);
          //     if (this.query.checked === true) {
          //         this.getCheckedData();
          //     } else {
          //         this.getData();
          //     }
          // },

          handleSearch: debounce(function () {
              this.$set(this.query, 'pageIndex', 1);
              if (this.query.checked === true) {
                  this.getCheckedData();
              } else {
                  this.getData();
              }
          }, 300),

          // 编辑操作
          handleEdit(index, row, n) {
              if (n == 1) {
                  // 编辑
                  this.$handleLock.call(this, index, row, this.edit, '/album/lock', row.id);
                  this.$storage.set('operate', { ...this.$storage.get('operate'), name3: 'edit' });
              } else {
                  // 查看
                  this.edit(index, row);
                  this.$storage.set('operate', { ...this.$storage.get('operate'), name3: 'search' });
              }
          },
          edit(index, row) {
              this.SET_QUKUALBUM_FORM({});
              this.$router.replace({
                  path: '/album_3/info_2',
                  query: {
                      id: row.id
                  }
              });
              localStorage.setItem('id_album', row.id);
              localStorage.removeItem('indexFlag_album');
          },
          // async handleLock(index, row, callback) {
          //     try {
          //         let url = '/album/lock';
          //         let { data: res } = await this.$http[0].get(url, {
          //             headers: {
          //                 name: localStorage.getItem('ms_username')
          //             },
          //             params: {
          //                 id: row.id
          //             }
          //         });
          //         if (res.code != '0000') {
          //             throw new Error(res.message);
          //         }
          //         callback && callback(index, row);
          //     } catch (err) {
          //         console.dir(err);
          //         this.$message.error({
          //             message: err.message,
          //             duration: 1500
          //         });
          //     }
          // },
          // 打标签
          handleTagging(index, row) {
              this.$handleLock.call(this, index, row, this.tagging, '/album/lock', row.id);
          },
          tagging(index, row) {
              this.albumId = row.id;
              this.editVisible = true;
              this.tagList = [];
              this.form = {};
              this.getEditData(row.id);
              this.getTagData();
          },
          async getTagData() {
              try {
                  let url = '/tag/tagAll';
                  let { data: res } = await this.$http[2].get(url, {
                      params: {
                          type: 2
                          // page: this.query.pageIndex,
                          // size: this.query.pageSize
                      }
                  });
                  // console.log('标签列表', JSON.stringify(res));
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  if (res.data && res.data.length != 0) {
                      res.data.map((v) => {
                          v.disabled = true;
                      });
                      var ret = this.formatData(res.data);
                      console.log('ret', ret);
                      this.tagList = ret;
                      // this.pageTotal = res.data.totalElements || 0;
                      // this.SET_QUKUALBUM_PAGETOTAL(res.data.totalElements || 0);
                  } else {
                      this.tagList = [];
                      // this.pageTotal = res.data.totalElements || 0
                      // this.SET_QUKUALBUM_PAGETOTAL(0);
                  }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          formatData(array) {
              for (let item of array) {
                  item.value = item.id;
                  item.label = item.description;
                  item.children = [];
                  // 删除返回的没用的属性
                  delete item.type;
                  delete item.createTime;
                  delete item.description;
                  delete item.groupId;
                  delete item.id;
                  delete item.name;
                  delete item.status;
                  delete item.updateTime;
                  delete item.pid;

                  if (item.tblTags && item.tblTags.length != 0) {
                      item.children = item.tblTags;
                      // 删除返回的没用的属性
                      delete item.tblTags;
                      this.formatData(item.children);
                  } else {
                      delete item.children;
                  }
              }
              return array;
          },
          async getEditData(albumId) {
              try {
                  let url = '/album/getalbumtag';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          albumId
                      })
                  });

                  console.log(res);
                  // this.form = res.data;
                  this.form = {
                      tags: [],
                      albumName: ''
                  };
                  this.form.albumName = res.data.albumName;
                  // this.form.tags = [];
                  // if (res.data.tags && res.data.tags.length && res.data.tags.length > 0) {
                  //     for (var i = 0, len = res.data.tags.length; i < len; i++) {
                  //         if (res.data.tags[i].groupId) {
                  //             this.form.tags.push([res.data.tags[i].groupId, res.data.tags[i].id]);
                  //         } else if (res.data.tags[i].pid) {
                  //             this.form.tags.push([res.data.tags[i].pid, res.data.tags[i].id]);
                  //         }
                  //     }
                  // }

                  if (res.data.tags && res.data.tags.length && res.data.tags.length > 0) {
                      this.form.tags = res.data.tags;
                  } else {
                      this.form.tags = [];
                  }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          handleClose() {
              this.$handleUnlock.call(this, this.close, '/album/unlock', this.albumId);
          },
          close() {
              this.editVisible = false;
          },
          // async handleUnlock(callback) {
          //     try {
          //         let url = '/album/unlock';
          //         let { data: res } = await this.$http[0].get(url, {
          //             params: {
          //                 id: this.albumId
          //             }
          //         });
          //         if (res.code != '0000') {
          //             throw new Error(res.message);
          //         }
          //         callback && callback();
          //     } catch (err) {
          //         console.dir(err);
          //         this.$message.error({
          //             message: err.message,
          //             duration: 1500
          //         });
          //     }
          // },
          saveTagging: throttle(function () {
              this.save();
          }, 1000),
          // saveTagging() {
          //     // this.$handleUnlock.call(this, this.save, '/album/unlock', this.albumId);
          //     this.save();
          // },
          async save() {
              try {
                  let url = '/album/taging';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          objectId: this.albumId,
                          // tagIds: this.getOneArray(this.form.tags).join(',')
                          tagIds: this.form.tags.join(',')
                      }),
                      headers: {
                          name: localStorage.getItem('ms_username')
                      }
                  });
                  console.log(res);
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.form = {
                      tags: [],
                      albumName: ''
                  };
                  this.editVisible = false;
                  this.getData();
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          getOneArray(twoArray) {
              var tempArr = [];
              if (twoArray && twoArray.length && twoArray.length > 0) {
                  twoArray = Array.from(twoArray);
                  twoArray.map((arr) => {
                      arr = arr || [];
                      arr = Array.from(arr);
                      tempArr.push(arr[arr.length - 1]);
                  });
              }
              return [...new Set(tempArr)];
          },
          // 分页导航
          handlePageChange(val) {
              this.$set(this.query, 'pageIndex', val);
              this.SET_QUKUALBUM_QUERY(this.query);
              if (this.query.checked === true) {
                  this.getCheckedData();
              } else {
                  this.getData();
              }
          },
          handleSizeChange(val) {
              this.$set(this.query, 'pageSize', val);
              this.SET_QUKUALBUM_QUERY(this.query);
              if (this.query.checked === true) {
                  this.getCheckedData();
              } else {
                  this.getData();
              }
          }
      }
  };
</script>

<style lang="scss">
  #quku_album {
      .table-header {
          .cell {
              white-space: nowrap !important;
          }
      }
      .handle-box {
          margin-bottom: 20px;
          .el-form {
              display: flex;
              flex-direction: row;
              .el-form-item {
                  width: calc(100% / 7);
                  .el-form-item__content {
                      .el-select,
                      .handle-input {
                          width: 100%;
                      }
                  }
              }
          }
      }

      .handle-select {
          width: 120px;
      }

      .handle-input {
          /* width: 300px; */
          width: 69px;
          height: 28px;
          display: inline-block;
      }
      .table {
          width: 100%;
          font-size: 14px;
      }
      .red {
          color: #ff0000;
      }
      .mr10 {
          margin-right: 10px;
      }
      .table-td-thumb {
          display: block;
          margin: auto;
          width: 40px;
          height: 40px;
      }
  }
</style>
